<template>
  <div class="index-container">
    <el-divider content-position="left">网站概况</el-divider>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-gradual-red">
          <span class="home-title">今日业绩</span>
          <div class="home-number">
            <span class="home-subnumber-left">￥</span>
            <byui-count :start-val="0" :end-val="topData.todayMoneyTotal" :duration="3000" separator="," :decimals="2" />
            <span class="home-subnumber-right">元</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-gradual-orange">
          <span class="home-title">今日订单数</span>
          <div class="home-number">
            <byui-count :start-val="0" :end-val="topData.todayOrderTotal" :duration="3000" separator="," :decimals="0" />
            <span class="home-subnumber-right">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-gradual-green">
          <span class="home-title">礼金总盈亏</span>
          <div class="home-number">
            <span class="home-subnumber-left">￥</span>
            <byui-count :start-val="0" :end-val="topData.taolijinTotal" :duration="3000" separator="," :decimals="2" />
            <span class="home-subnumber-right">元</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-gradual-purple">
          <span class="home-title">总业绩</span>
          <div class="home-number">
            <span class="home-subnumber-left">￥</span>
            <byui-count :start-val="0" :end-val="topData.moneyTotal" :duration="3000" separator="," :decimals="2" />
            <span class="home-subnumber-right">元</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-gradual-blue">
          <span class="home-title">总订单数</span>
          <div class="home-number">
            <byui-count :start-val="0" :end-val="topData.orderTotal" :duration="3000" separator="," :decimals="0" />
            <span class="home-subnumber-right">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-gradual-pink">
          <span class="home-title">客服数量</span>
          <div class="home-number">
            <byui-count :start-val="0" :end-val="topData.userTotal" :duration="3000" :decimals="0" />
            <span class="home-subnumber-right">位</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div style="width: 100%;border: 1px solid #F1F1F1;border-radius: 3px;">
          <el-table :data="tableData" style="width: 100%;border-bottom: 1px solid #FFFFFF;" :row-style="iRowStyle"
            :cell-style="iRowStyle" :header-cell-style="iheaderStyle" :header-row-style="iheaderStyle" >
            <el-table-column prop="date" label="" width="80"></el-table-column>
            <el-table-column prop="orderTotal" label="付款笔数"></el-table-column>
            <el-table-column prop="payMoneyTotal" label="付款金额"></el-table-column>
            <el-table-column prop="moneyTotal" label="预估盈亏"></el-table-column>
          </el-table>
          <div style="text-align: center;color: #606266;margin-bottom: 20px;margin-top: 20px;">*该数据为预估纯业绩</div>
        </div>
      </el-col>
      <el-col :span="16"><byui-chart autoresize :options="chart" /></el-col>
    </el-row>
  </div>
</template>

<script>
import ByuiCount from '@/plugins/byuiCount';
import ByuiChart from '@/plugins/echarts';
import { listHome } from '@/api/index';
export default {
  name: 'Index',
  components: {
    ByuiCount,
    ByuiChart
  },
  data() {
    return {
      topData:{},
      tableData: [],
      chart: {
        title: {
          text: '24小时实时成交概况',
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 20
          },
          top: '3%',
          left: '10%'
        },
        backgroundColor: '#0f375f',
        grid: {
          top: '25%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        legend: {
          top: '15%',
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          data: [],
          axisLine: {
            show: true //隐藏X轴轴线
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '预估佣金',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            },
            axisLabel: {
              show: true,
              formatter: '{value}元', //右侧Y轴文字显示
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            name: '订单量',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            position: 'right',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
              }
            }
          }
        ],
        series: [
          {
            name: '付款笔数',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              color: '#058cff'
            },
            lineStyle: {
              color: '#058cff'
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)'
            },
            data: []
          },
          {
            name: '预估佣金',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00FFE3'
                  },
                  {
                    offset: 1,
                    color: '#4693EC'
                  }
                ])
              }
            },
            data: []
          }
        ]
      }
    };
  },
  created() {
    listHome({}).then(res=>{
      this.topData = res.data.topData
      this.tableData = res.data.tableData
      this.chart.xAxis.data = res.data.chartTime
      this.chart.series[0].data = res.data.chartOrderTotal
      this.chart.series[1].data = res.data.chartMoney
    })
  },
  mounted() {},
  methods: {
    iRowStyle: function({ row, rowIndex }) {
      return { height: '66px', borderBottom: '1px solid #FFFFFF' };
    },
    iheaderStyle: function({ row, rowIndex }) {
      return { height: '80px', background: '#F1F1F1', color: '#606266' };
    }
  }
};
</script>

<style lang="scss" scoped>
.index-container {
  ::v-deep {
    .el-card__body {
      > div {
        padding: 20px;
        min-height: 450px;
        > ul {
          > li {
            line-height: 30px;
          }
        }
      }
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-gradual-red {
  background-image: -webkit-linear-gradient(45deg, #f43f3b, #ec008c);
  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
  color: #ffffff;
}
.bg-gradual-orange {
  background-image: -webkit-linear-gradient(45deg, #ff9700, #ed1c24);
  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
  color: #ffffff;
}
.bg-gradual-blue {
  background-image: -webkit-linear-gradient(45deg, #0081ff, #1cbbb4);
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
  color: #ffffff;
}
.bg-gradual-pink {
  background-image: -webkit-linear-gradient(45deg, #ec008c, #6739b6);
  background-image: linear-gradient(45deg, #ec008c, #6739b6);
  color: #ffffff;
}
.bg-gradual-green {
  background-image: -webkit-linear-gradient(45deg, #39b54a, #8dc63f);
	background-image: linear-gradient(45deg, #39b54a, #8dc63f);
	color: #ffffff;
}
.bg-gradual-purple {
  background-image: -webkit-linear-gradient(45deg, #9000ff, #5e00ff);
	background-image: linear-gradient(45deg, #9000ff, #5e00ff);
	color: #ffffff;
}
.grid-content {
  border-radius: 4px;
  height: 120px;
  padding: 20px;
}
.home-title {
  font-weight: 600;
  border-bottom: #ffffff solid 2px;
  line-height: 30px;
  font-size: 14px;
}
.home-number {
  font-size: 30px;
  font-weight: 900;
  line-height: 40px;
  margin-top: 5px;
}
.home-subnumber-left {
  font-size: 20px;
  line-height: 40px;
  margin-right: 5px;
}
.home-subnumber-right {
  font-size: 20px;
  line-height: 40px;
  margin-left: 5px;
}
.echarts {
  width: 100%;
}
table {
  border-bottom: 1px solid #ffffff;
}
.el-col-5{
  width: 20%;
}
</style>
